<template>
  <q-page>
    <div class="q-pa-md">
      <q-list bordered padding>
        <q-item-label header>操作与显示</q-item-label>
        <q-item tag="label">
          <q-item-section>
            <q-item-label>开启删除时弹窗</q-item-label>
            <q-item-label caption lines="2">
              关闭之后，删除时无弹窗提示，立即删除
            </q-item-label>
          </q-item-section>
          <q-item-section side top>
            <q-toggle
              color="blue"
              v-model="settingsStore.settings.promptToDelete"
              val="battery"
            />
          </q-item-section>
        </q-item>
        <q-item tag="label">
          <q-item-section>
            <q-item-label>显示运行金额</q-item-label>
            <q-item-label caption lines="2"> 开启将显示运算金额 </q-item-label>
          </q-item-section>
          <q-item-section side top>
            <q-toggle
              color="blue"
              v-model="settingsStore.settings.showRunningTotal"
              val="battery"
            />
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section>
            <q-input
              v-select-all
              outline
              label="金额前缀"
              v-model="settingsStore.settings.currencySymbol"
            />
          </q-item-section>
        </q-item>

        <q-separator />
        <q-item-label header>系统设置</q-item-label>
        <q-item tag="label">
          <q-item-section avatar>
            <q-radio v-model="settingsStore.settings.darkMode" :val="false" />
          </q-item-section>
          <q-item-section>
            <q-item-label>明亮</q-item-label>
          </q-item-section>
        </q-item>

        <q-item tag="label">
          <q-item-section avatar>
            <q-radio v-model="settingsStore.settings.darkMode" :val="true" />
          </q-item-section>
          <q-item-section>
            <q-item-label>深色</q-item-label>
          </q-item-section>
        </q-item>

        <q-item tag="label">
          <q-item-section avatar top>
            <q-radio v-model="settingsStore.settings.darkMode" val="auto" />
          </q-item-section>
          <q-item-section>
            <q-item-label>自动</q-item-label>
            <q-item-label caption> 跟随系统 </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
      <q-item class="flex justify-end pr-0">
        <q-btn dense color="primary" icon="save" @click="router.push('/')">
          保存设置
        </q-btn>
      </q-item>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { useSettingsStore } from "src/stores/storeSettings";
import vSelectAll from "src/directives/directiveSelectAll";
import { useRouter } from "vue-router";

const router = useRouter();
const settingsStore = useSettingsStore();
</script>
